I am building a mobile app for a band and obviously want it to display well in all the plethora of handsets out there today. I built it at first for my own device and it looks and works great, so now I am reworking it in percentages so that it works in all devices.

I have a slider (jquerytools) going on and if i set width to 100% then it is perfectly wide in my iphone and my ipad... success, however I am not having any luck with height. It seems to only accept a height in px. If i set a height in percent it just doesn't display.

any ideas?

#header{
width:100%;
height:198px;
position:relative;
z-index: 20;
box-shadow: 0 0 10px white;
}


.scrollable {

/* required settings */
position:relative;
overflow:hidden;
width: 100%;
height:100%;
box-shadow: 0 0 20px purple;
z-index: 20;

}


.scrollable .items {
/* this cannot be too large */
width:500%;
height:100%;
position:absolute;
clear:both;
box-shadow: 0 0 30px green;

}

.items div {
float:left;
width:20%;
height:100%;
}

/* single scrollable item */
.scrollable img {
float:left;
width:100%;
height:100%;
/*    height:198px; */
}

/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}

`